import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Drawer } from 'antd';
import { ReactElement, useContext, useMemo } from 'react';
import { GlobalShortcutContext } from '../mconfig/useShortcutContext';
import { MinusOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { IShortcutActionEnum } from '../common';
import { ShortcutMailForm } from './ShortcutMailForm';
import { ShortPhoneForm } from './ShortPhoneForm';
import { GlobalShortcutKeyAPI } from '../common/type';

export const ShortcutContactDrawer: React.FC<
  GlobalShortcutKeyAPI.IShortcutContactDrawer
> = () => {
  const { shortcutDispatch, shortcutCheckKey, prefixCls } = useContext(
    GlobalShortcutContext,
  );

  /**
   * 判断打开的是拨打电话,还是发送短信
   */
  const shortcutTypeName = useMemo(() => {
    let name: string | ReactElement = '';
    if (shortcutCheckKey == 'phoneShortcut') {
      name = (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <PhoneOutlined />
          &nbsp; 拨打电话
        </div>
      );
    } else if (shortcutCheckKey == 'mailShortcut') {
      name = (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <MailOutlined />
          &nbsp; 发送短信
        </div>
      );
    }
    return name;
  }, [shortcutCheckKey]);

  return (
    <Drawer
      open={shortcutTypeName ? true : false}
      title={shortcutTypeName}
      placement="bottom"
      closable={false}
      getContainer={document.getElementById('root') as any}
      height={shortcutCheckKey == 'phoneShortcut' ? 500 : 400}
      style={{
        position: 'absolute',
        width: '400px',
      }}
      headerStyle={{
        padding: '.5rem',
      }}
      className={prefixCls + 'shortcutDrawer'}
      bodyStyle={{
        padding: 0,
      }}
      mask={false}
      extra={
        <a
          onClick={() => {
            shortcutDispatch({
              type: IShortcutActionEnum.CLEAR_RECEIVE,
            });
          }}
        >
          <MinusOutlined />
        </a>
      }
    >
      <ScrollBarLayout
        style={{
          overflow: 'hidden',
        }}
      >
        {shortcutCheckKey == 'phoneShortcut' && <ShortPhoneForm />}

        {shortcutCheckKey == 'mailShortcut' && <ShortcutMailForm />}
      </ScrollBarLayout>
    </Drawer>
  );
};
